<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui">
	
	<f:view contentType="text/html">
		<h:head>
			<h:outputStylesheet library="css" name="style.css" />
			<title>Login</title>
		</h:head>
		<h:body>
			<p:panel id="loginFormWrap" style="width: 280px; margin: 150px auto;">
				<h:form id="loginForm">
				
					<p:messages id="messages" autoUpdate="true" /> 
					
					<h:panelGrid columns="2">  
				
				 		<h:column>
				 			<h:outputLabel value="#{messages.username}" for="username"/>
				 		</h:column>
				 		<h:column>
				 			<p:inputText id="username" value="#{loginController.userName}" required="true"/>
				 		</h:column>
				 	
				 		<h:column>
							<h:outputLabel for="password" value="#{messages.password}" /> 
						</h:column> 
		           		<h:column>
		           			<p:password id="password" value="#{loginController.password}" required="true"/>
		           		</h:column>
				
       					<h:column/>
       					<h:column>
       						<p:commandButton ajax="false" value="#{messages.login}" action="#{loginController.loginAction}"/> 
       					</h:column>
        				
					</h:panelGrid>  
				</h:form>
			
			</p:panel>
		</h:body>
	</f:view>
</html>